@charset "utf-8";
@function w($px) {
    @return $px/640px*100%
}

@function h($px) {
    @return $px/1136px*100%
}

@function c($px) {
    @return $px/2
}

* {
    padding: 0;
    margin: 0;
}

#fullpage {
    font-size: 0;
    .section {
        width: 100%;
        .fp-controlArrow {
            display: none;
        }
        .index {
            background-image: url(../img/index/bg.png);
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
            background-size: cover;
            .logo {
                width: w(103px);
                height: h(38px);
                position: absolute;
                top: h(47px);
                left: w(45px);
                img {
                    width: 100%;
                }
            }
            .title_top {
                width: w(381px);
                height: h(69px);
                position: absolute;
                top: h(162px);
                left: w(127px);
                img {
                    width: 100%;
                }
            }
            .title_middle {
                width: w(575px);
                height: h(144px);
                position: absolute;
                top: h(215px);
                left: w(25px);
                img {
                    width: 100%;
                }
            }
            .title_center {
                width: w(352px);
                height: h(62px);
                position: absolute;
                top: h(366px);
                left: w(147px);
                img {
                    width: 100%;
                }
            }
            .title_bottom {
                width: w(343px);
                height: h(29px);
                position: absolute;
                top: h(439px);
                left: w(151px);
                img {
                    width: 100%;
                }
            }
            .clould_big {
                width: w(78px);
                height: h(57px);
                position: absolute;
                top: h(401px);
                left: w(45px);
                img {
                    width: 100%;
                }
            }
            .clould_1 {
                width: w(44px);
                height: h(33px);
                position: absolute;
                top: h(541px);
                right: w(141px);
                img {
                    width: 100%;
                }
            }
            .clould_2 {
                width: w(58px);
                height: h(41px);
                position: absolute;
                top: h(436px);
                right: w(60px);
                img {
                    width: 100%;
                }
            }
            .clould_3 {
                width: w(58px);
                height: h(41px);
                position: absolute;
                top: h(610px);
                right: w(48px);
                img {
                    width: 100%;
                }
            }
            .clould_4 {
                width: w(78px);
                height: h(57px);
                position: absolute;
                top: h(401px);
                left: w(45px);
                img {
                    width: 100%;
                }
            }
            .moon_light {
                width: w(183px);
                height: h(192px);
                position: absolute;
                top: h(496px);
                right: w(60px);
                img {
                    height: 100%;
                }
            }
            .moon {
                width: w(66px);
                height: h(67px);
                position: absolute;
                top: h(560px);
                right: w(117px);
                img {
                    height: 100%;
                }
            }
            .queen {
                width: w(327px);
                height: h(422px);
                position: absolute;
                bottom: h(146px);
                left: w(155px);
                img {
                    height: 100%;
                }
            }
            .description_1 {
                width: w(128px);
                height: h(77px);
                position: absolute;
                bottom: h(159px);
                left: w(56px);
                img {
                    width: 100%;
                }
            }
            .description_2 {
                width: w(96px);
                height: h(70px);
                position: absolute;
                bottom: h(421px);
                left: w(50px);
                img {
                    width: 100%;
                }
            }
            .description_3 {
                width: w(94px);
                height: h(57px);
                position: absolute;
                bottom: h(194px);
                right: w(58px);
                img {
                    width: 100%;
                }
            }
            .description_4 {
                width: w(148px);
                height: h(82px);
                position: absolute;
                bottom: h(421px);
                right: w(46px);
                img {
                    width: 100%;
                }
            }
            .btn_test {
                width: w(171px);
                height: h(70px);
                position: absolute;
                bottom: h(61px);
                left: w(236px);
                img {
                    width: 100%;
                }
            }
        }
        .page1 {
            background-image: url(../img/page/bg1.png);
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
            background-size: cover;
            p {
                width: 100%;
                color: white;
                font-size: c(33.33px);
                position: absolute;
                text-align: center;
                top: h(105px);
                margin: 0;
            }
            .tf {
                width: w(250px);
                height: h(350px);
                position: absolute;
                top: h(181px);
                left: w(201px);
                img {
                    height: 100%;
                }
            }
            .chose {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(390px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose1 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(300px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose2 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(209px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose3 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(118px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .dog {
                width: w(160px);
                height: h(353px);
                position: absolute;
                bottom: h(79px);
                left: w(478px);
                img {
                    height: 100%;
                }
            }
        }
        .page2 {
            background-image: url(../img/page/bg-2-3.png);
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
            background-size: cover;
            p {
                left: 50%;
                transform: translateX(-50%);
                width: w(496px);
                color: white;
                font-size: c(33.33px);
                position: absolute;
                text-align: center;
                top: h(105px);
                margin: 0;
            }
            .hulu {
                width: w(208px);
                height: h(234px);
                position: absolute;
                top: h(274px);
                left: w(215px);
                img {
                    height: 100%;
                }
            }
            .chose {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(390px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose1 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(300px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose2 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(209px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose3 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(118px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .dog {
                width: w(160px);
                height: h(353px);
                position: absolute;
                bottom: h(79px);
                left: w(478px);
                img {
                    height: 100%;
                }
            }
        }
        .page3 {
            background-image: url(../img/page/bg-2-3.png);
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
            background-size: cover;
            p {
                left: 50%;
                transform: translateX(-50%);
                width: w(496px);
                color: white;
                font-size: c(33.33px);
                position: absolute;
                text-align: center;
                top: h(105px);
                margin: 0;
                text-align: justify;
            }
            .yinfu {
                width: w(45px);
                height: h(50px);
                position: absolute;
                top: h(266px);
                right: w(171px);
                img {
                    width: 100%;
                }
            }
            .boy {
                width: w(319px);
                height: h(213px);
                position: absolute;
                top: h(308px);
                left: w(140px);
                img {
                    height: 100%;
                }
            }
            .chose {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(390px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose1 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(300px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose2 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(209px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .chose3 {
                width: w(368px);
                height: h(63px);
                position: absolute;
                bottom: h(118px);
                left: w(58px);
                img {
                    height: 100%;
                }
                p {
                    color: #000000;
                    font-size: c(27.52px);
                    text-align: left;
                    padding-left: c(18px);
                    position: absolute;
                    top: h(20px);
                    margin: 0;
                    padding-top: h(14px);
                }
            }
            .dog {
                width: w(160px);
                height: h(353px);
                position: absolute;
                bottom: h(79px);
                left: w(478px);
                img {
                    height: 100%;
                }
            }
        }
        .comment {
            width: 100%;
            background-image: url(../img/mask/bg.png);
            background-repeat: no-repeat;
            overflow: hidden;
            position: relative;
            background-size: cover;
            .kugo_logo {
                width: w(103px);
                height: h(98px);
                position: absolute;
                top: h(45px);
                left: w(44px);
                img {
                    width: 100%;
                }
            }
            .logo_kugo {
                width: w(174px);
                height: h(175px);
                position: absolute;
                top: h(118px);
                left: 50%;
                transform: translateX(-50%);
                img {
                    height: 100%;
                }
            }
            p {
                width: 100%;
                position: absolute;
                top: h(303px);
                text-align: center;
                font-size: c(33.3px);
                color: white;
                padding: 0;
                margin: 0;
                >span {
                    color: #fff000;
                }
            }
            p:nth-of-type(2) {
                width: 100%;
                display: block;
                position: absolute;
                text-align: center;
                font-size: c(33.3px);
                color: white;
                top: h(362px);
                padding: 0;
                margin: 0;
            }
            p:nth-of-type(3) {
                text-align: left;
                width: 100%;
                position: absolute;
                top: h(478px);
                left: w(40px);
                color: #b3b8c0;
                padding: 0;
                margin: 0;
            }
            p:nth-of-type(4) {
                text-align: left;
                width: 100%;
                position: absolute;
                top: h(518px);
                left: w(40px);
                color: #b3b8c0;
                padding: 0;
                margin: 0;
            }
            .inpress_70 {
                width: w(133px);
                height: h(57px);
                position: absolute;
                bottom: h(475px);
                left: w(79px);
                background-color: #5c717b;
                border-radius: c(25px);
                p {
                    text-align: center;
                    line-height: 1em;
                    color: black;
                    font-size: c(25px);
                }
            }
            .inpress_00 {
                width: w(169px);
                height: h(58px);
                position: absolute;
                bottom: h(542px);
                right: w(80px);
                background-color: #bcccd9;
                border-radius: c(25px);
                p {
                    text-align: center;
                    line-height: 1em;
                    color: black;
                    font-size: c(25px);
                }
            }
            .inpress_90 {
                width: w(179px);
                height: h(57px);
                position: absolute;
                bottom: h(447px);
                left: w(222px);
                background-color: #a2b360;
                border-radius: c(25px);
                p {
                    text-align: center;
                    line-height: 1em;
                    color: black;
                    font-size: c(25px);
                }
            }
            .inpress_95 {
                width: w(190px);
                height: h(57px);
                position: absolute;
                bottom: h(398px);
                right: w(62px);
                background-color: #c2bc20;
                border-radius: c(25px);
                p {
                    text-align: center;
                    line-height: 1em;
                    color: black;
                    font-size: c(25px);
                }
            }
            h3 {
                display: block;
                width: 100%;
                position: absolute;
                text-align: center;
                font-size: c(25px);
                color: #d5d5d5;
                bottom: h(310px);
                padding: 0;
                margin: 0;
            }
            input {
                width: w(499px);
                height: h(75px);
                left: w(69px);
                bottom: h(219px);
                position: absolute;
                background-color: transparent;
                border-color: white;
                color: white;
            }
            .btn {
                width: w(141px);
                height: h(51px);
                position: absolute;
                bottom: h(149px);
                left: w(152px);
                img {
                    width: 100%;
                }
            }
            .btn_1 {
                width: w(141px);
                height: h(51px);
                position: absolute;
                bottom: h(149px);
                right: w(157px);
                img {
                    width: 100%;
                }
            }
            .mask {
                width: 100%;
                height: 100%;
                z-index: 999;
                background-color: black;
                top: 0;
                opacity: 0.9;
                position: absolute;
                background-size: cover;
                .kugo {
                    width: w(168px);
                    height: h(166px);
                    position: absolute;
                    top: h(284px);
                    left: w(236px);
                    img {
                        width: 100%;
                    }
                }
                .tip {
                    width: w(442px);
                    height: h(33px);
                    position: absolute;
                    top: h(489px);
                    left: 50%;
                    transform: translateX(-50%);
                    img {
                        height: 100%;
                    }
                }
            }
        }
    }
}

@media only screen and (max-height: 481px) {
    #fullpage {
        .section {
            .index {
                .title_top {
                    top: h(120px);
                }
                .title_middle {
                    top: h(203px);
                }
                .title_center {
                    top: h(390px);
                }
                .title_bottom {
                    top: h(476px);
                }
            }
            .comment {
                .logo_kugo {
                    top: h(98px);
                }
                p:nth-of-type(3) {
                    top: h(438px);
                }
                p:nth-of-type(4) {
                    top: h(498px);
                }
            }
        }
    }
}

@media only screen and (min-height:532px)and (max-height: 567px) {
    #fullpage {
        .section {
            .index {
                .title_top {
                    top: h(120px);
                }
                .title_middle {
                    top: h(193px);
                }
                .title_center {
                    top: h(390px);
                }
                .title_bottom {
                    top: h(476px);
                }
            }
        }
    }
}

@media only screen and (min-height:568px)and (max-height: 650px) {
    #fullpage {
        .section {
            .index {
                .title_top {
                    top: h(130px);
                }
                .title_middle {
                    top: h(203px);
                }
                .title_center {
                    top: h(380px);
                }
                .title_bottom {
                    top: h(476px);
                }
            }
        }
    }
}

@media only screen and (min-height:700px)and (max-height: 750px) {
    #fullpage {
        .section {
            .index {
                .title_top {
                    top: h(140px);
                }
                .title_middle {
                    top: h(203px);
                }
                .title_center {
                    top: h(360px);
                }
                .title_bottom {
                    top: h(436px);
                }
            }
        }
    }
}